<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box1">
        <p>上一个兄弟</p>
        <p id="pre">你好</p>
        <p>下一个</p>
        <p></p>
    </div>

    <script>
        var box1 = document.getElementById('box1');
        //获取子节点
        console.log(box1.childNodes);
        //获取子节点（ie9兼容）
        console.log(box1.children);//console.log(box1.children.pre);
        //第一个子节点firstChild（ie9是firstElementChild)
        console.log('第一个子节点');
        console.log(box1.firstChild);
        console.log(box1.firstElementChild);

        console.log("--前一个兄弟节点--");
        //前一个兄弟节点
        var p_pre = document.getElementById('pre');
        //var p_pre = document.getElementsByTagName('p')[0];
        // console.log(p_pre);
        console.log(p_pre.previousSibling);//文本节点text的nodeType是3
        //ie9
        console.log(p_pre.previousElementSibling);
        //下一个兄弟节点nextSibling (nextElementSibling)

        console.log("下一个");
        console.log(p_pre.nextSibling);
        console.log(p_pre.nextElementSibling);
        //父节点
        console.log(p_pre.parentElement);
    </script>
</body>

</html>